<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>课程列表</span>
      </div>
    </template>
    <div class="text item">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="序号" />
        <el-table-column prop="name" label="课程名称" />
        <el-table-column prop="time" label="创建时间" />
        <el-table-column label="可见状态">
          <template v-slot="scope">
            <el-switch active-value="1" inactive-value="0" v-model="scope.row.on" @change="GoodFind(scope.row)">
            </el-switch> </template></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="messageShow(scope.row.name, '正在编辑')"><el-icon><edit-pen />
              </el-icon></el-button>
            <el-button size="small" @click="messageShow(scope.row.name, '正在资源管理')" >
              <el-icon><files />
              </el-icon></el-button>
            <el-button size="small" @click="messageShow(scope.row.name, '正在资源编排')"
              ><el-icon><monitor />
              </el-icon></el-button>
            <el-button size="small" @click="messageShow(scope.row.name, '正在开课')">
              <el-icon><school />
              </el-icon></el-button>
          </template>
        </el-table-column>
</el-table>
<p>{{message}}</p>
</div>
</el-card>
</template>
<script>
import { EditPen, Files, Monitor, School } from "@element-plus/icons-vue";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "lmkechengming",
  components: {
    EditPen,
    Files,
    Monitor,
    School,
  },
  methods: {
    GoodFind(data) {
      if (data.on == 1) {
        this.$message({
          message: data.name + "现在是可见的",
          type: "success",
        });
      } else {
        this.$message({
          message: data.name + "现在不可见",
          type: "warning",
        });
      }
    },
    messageShow(name, msg) {
      this.message = msg + name;
    },
  },
  data() {
    return {
      tableData: [
        {
          date: 1,
          name: "Java程序设计",
          time: "2020-12-12",
        },
        {
          date: 2,
          name: "Mysql数据库技术",
          time: "2021-12-11",
        },
        {
          date: 3,
          name: "web前端开发基础",
          time: "2021-12-11",
        },
        {
          date: 4,
          name: "web前端开发实战",
          time: "2021-12-11",
        },
      ],
      message: "",
    };
  },
};
</script>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
  height: 400px;
}
</style>